<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>redis set 命令案例-共同好友</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="app">
    <div class="layout">
        <layout>
            <i-header>
                <i-menu mode="horizontal" theme="dark" active-name="1" >
                    <div class="layout-nav">
                    </div>
                </i-menu>
            </i-header>
            <i-content :style="{padding: '0 50px'}">
                <row>
                    <i-col>
                        <card>
                            <row style="margin-bottom: 2px">
                                <i-col span="9">
                                    <card dis-hover  style="margin: 10px 5px;    height: 300px;overflow-y: scroll;" >
                                        <p slot="title">
                                            <Icon type="ios-list-outline"></Icon>
                                            A的好友
                                        </p>
                                        <tag v-for="item in aFriendData" closable @on-close="delFriend('A',item)">{{ item}}</tag>
                                    </card>
                                </i-col>
                                <i-col span="6">
                                    <card dis-hover  style="margin: 10px 5px">
                                        <p slot="title">
                                            <Icon type="ios-list-outline"></Icon>
                                            操作
                                        </p>
                                        <i-button @click="addFriend" type="ghost" icon="plus-circled">添加好友</i-button>
                                    </card>
                                    <card dis-hover  style="margin: 10px 5px">
                                        <p slot="title">
                                            <Icon type="ios-list-outline"></Icon>
                                            操作
                                        </p>
                                        <i-button @click="intersectFriend" type="ghost" icon="plus-circled">共同好友</i-button>
                                        <i-button @click="differenceFriend" type="ghost" icon="plus-circled">A独有的好友</i-button>
                                        <i-button @click="unionFriend" type="ghost" icon="plus-circled">所有的好友</i-button>
                                    </card>
                                </i-col>
                                <i-col span="9">
                                    <card dis-hover  style="margin: 10px 5px;    height: 300px;overflow-y: scroll;" >
                                        <p slot="title">
                                            <Icon type="ios-list-outline"></Icon>
                                            B的好友
                                        </p>
                                        <tag v-for="item in bFriendData" closable @on-close="delFriend('B',item)">{{ item}}</tag>
                                    </card>
                                </i-col>

                                <i-col span="24">
                                    <card dis-hover  style="margin: 10px 5px;  overflow-y: scroll;" >
                                        <p slot="title">
                                            <Icon type="ios-list-outline"></Icon>
                                            {{ resultFrientTitle }}
                                        </p>
                                        <tag v-for="item in resultFrient" >{{ item}}</tag>
                                    </card>
                                </i-col>

                            </row>
                        </card>
                    </i-col>
                </row>
            </i-content>
        </layout>
    </div>
    <Modal title="添加好友" v-model="modalVisible" :mask-closable='false' :width="400" :styles="{top: '30px'}">
        <i-form ref="form" :model="form" :label-width="70" :rules="formValidate">
            <form-item label="用户" prop="user">
                <i-select v-model="form.user" >
                    <i-option value="A" >A</i-option>
                    <i-option value="B" >B</i-option>
                </i-select>
            </form-item>
            <form-item label="好友" prop="friend" >
                <i-input v-model="form.friend"/>
            </form-item>
        </i-form>
        <div slot="footer">
            <i-button type="text" @click="cancel">取消</i-button>
            <i-button type="primary" :loading="submitLoading" @click="submit">提交</i-button>
        </div>
    </Modal>
</div>
</body>
</html>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/iview/2.14.0/iview.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>

<script type="text/javascript" src="js/index.js"></script>